<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ page contentType="text/html;charset=UTF-8" %>
<%
    List list = new ArrayList();
    for(int i = 1; i <= 36; i++) {
        list.add(i);
    }
    session.setAttribute("list", list);
%>
<html>
<head>
    <style>
        .list{
            padding-left: 0px;
        }
        .list li,.list li span{
            font-size: 18px;
            margin-bottom: 5px;
            list-style-type: none;
        }
    </style>
</head>
<body>
    <jsp:include page="head.jsp"></jsp:include>


    <div class="body">
        <div>
            <ul class="list fl">
                <li>标题：${data.title}</li>
                <li>位置：${data.house.position}</li>
                <li>面积：${data.house.area}m²</li>
                <li>朝向：${data.house.orientation}</li>
                <li>户型：${data.house.type}</li>
                <li>地址：${data.house.address}</li>
                <li>楼层：${data.house.floor}/${data.house.floorMax}</li>
                <li>电梯：${data.house.elevator == '1' ? '是' : '否'}</li>
                <li>房屋年代：${data.house.years}</li>
                <li>价格（月）：${data.price}</li>
                <li>最小租赁时长：${data.minNumber}个月起租</li>
                <li>代理人：${data.busiName}</li>
                <li>代理人电话：${data.busiMobile}</li>
                <li>备注：${data.remark}</li>
            </ul>
        </div>

        <div class="clear"></div>

        <c:if test="${user == null}">
            <div>
                <a href="/login" class="easyui-linkbutton c1" style="width:100%">请先登录</a>
            </div>
        </c:if>

        <c:if test="${user != null}">
            <div>
                <a id="createOrder" href="javascript:void(0)" class="easyui-linkbutton c1" style="width:100%">我要入住</a>
            </div>
        </c:if>



    </div>


    <div id="dlgSave" class="easyui-dialog dlg-save" data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'">
        <form id="fmSave" method="post" novalidate style="margin:0;padding:20px 50px">
            <input type="hidden" id="leaseId" name="leaseId" value="${data.id}">
            <table cellpadding="5">
                <tr>
                    <td colspan="1">入住时间（七天内入住）:</td>
                    <td colspan="3">
                        <input id="checkInTime" name="checkInTime" class="easyui-datebox" required="true" label="" style="width:100%">
                    </td>
                </tr>

                <tr>
                    <td colspan="1">租赁时长:</td>
                    <td colspan="3">
                        <select id="leaseTime" name="leaseTime" class="easyui-combobox" style="width:100%;">
                            <c:forEach items="${list}" varStatus="i" var="m">
                                <c:if test="${m >= data.minNumber}">
                                    <option value="${m}">${m}个月</option>
                                </c:if>
                            </c:forEach>
                        </select>
                    </td>
                </tr>

                <tr>
                    <td colspan="1">姓名:</td>
                    <td colspan="3">
                        <input name="customerName" class="easyui-textbox" required="true" label="" style="width:100%">
                    </td>
                </tr>

                <tr>
                    <td colspan="1">联系方式:</td>
                    <td colspan="3">
                        <input name="customerMobile" class="easyui-textbox" required="true" label="" style="width:100%">
                    </td>
                </tr>

                <tr>
                    <td colspan="1">需支付:</td>
                    <td colspan="3" id="price"></td>
                </tr>

            </table>
        </form>
    </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="save()" style="width:90px">下单</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlgSave').dialog('close')" style="width:90px">取消</a>
    </div>

    <script>

        var price = '${data.price}';

        $("#createOrder").click(function() {
            $('#dlgSave').dialog('open').dialog('center').dialog('setTitle','填写订单');
        });

        $("#leaseTime").combobox({
            onLoadSuccess: function(value) {
                if(value.length > 0) {
                    $("#price").text(price * value[0].value);
                }
            },
            onChange: function(value) {
                $("#price").text(price * value);
            }
        });


        function save() {
            $('#dlgSave').dialog('close');
            $('#fmSave').form('submit',{
                url: '/order/saveOrUpdate',
                onSubmit: function() {
                    return $(this).form('enableValidation').form('validate');
                },
                success: function(data){
                    let res = $.parseJSON(data);
                    console.log(res);

                    if(res.success) {
                        $.messager.show({
                            title: 'Success',
                            msg: '下单成功，即将跳转个人中心！'
                        });
                        setTimeout(function() {
                            window.location = '/personal';
                        }, 2000);
                    } else {
                        $.messager.show({
                            title: 'Error',
                            msg: res.msg
                        });
                    }
                }
            });
        }
    </script>
</body>
</html>